<template>
  <div class="app">
    <!-- 导航面包屑 -->
    <el-card>
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>营销</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:'/home/discount'}">限时折扣</el-breadcrumb-item>
        <el-breadcrumb-item>{{this.$store.state.marketing.action}}折扣活动</el-breadcrumb-item>
      </el-breadcrumb>
      <h1>{{this.$store.state.marketing.action}}折扣活动</h1>
    </el-card>

    <!-- 基础信息 -->
    <el-card>
      <el-row>
        <el-col :span="5">
          <p>基础信息</p>
        </el-col>
        <el-col :span="14">
          <el-form ref="addDiscountForm" :model="addDiscountForm" label-width="80px">
            <!-- 占位 -->
            <el-form-item></el-form-item>
            <el-form-item></el-form-item>
            <!-- 活动名称 -->
            <el-form-item label="活动名称">
              <el-input style="width:350px" v-model="addDiscountForm.name" placeholder="请输入名称"></el-input>
            </el-form-item>
            <!-- 原价 -->
            <el-form-item label="原价">
              <el-input style="width:350px" v-model="addDiscountForm.price" placeholder="请输入原价"></el-input>
            </el-form-item>
            <!-- 活动日期 -->
            <el-form-item label="有效期">
              <el-date-picker
                v-model="addDiscountForm.date"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <!-- 优惠叠加 -->
            <el-form-item label="优惠叠加">
              <el-radio-group v-model="addDiscountForm.superposition ">
                <el-radio label="不可叠加"></el-radio>
                <el-radio label="可叠加其他类型优惠"></el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 促销抹零 -->
            <el-form-item label="活动性质">
              <el-checkbox-group v-model="addDiscountForm.promotionErase">
                <el-checkbox label="抹零" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <!-- 商品限购 -->
            <el-form-item label="商品限购">
              <el-radio-group v-model="addDiscountForm.restrictions">
                <el-radio label="不限购">不限购</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item>
              <el-radio-group v-model="addDiscountForm.restrictions">
                <el-radio label="限购">
                  <span class="span1">最多购买</span>
                  <el-input
                    class="numInp"
                    v-model="addDiscountForm.restrictionsInp"
                    placeholder="请输入"
                  >
                    <template slot="append">件</template>
                  </el-input>
                </el-radio>
              </el-radio-group>
            </el-form-item>
            <!-- 显示划线价 -->
            <el-form-item label="划线价">
              <el-checkbox-group v-model="addDiscountForm.markingPrice">
                <el-checkbox label="显示划线价" name="type"></el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            <!-- 库存 -->
            <el-form-item label="库存">
              <el-input style="width:350px" v-model="addDiscountForm.store" placeholder="请输入库存数量"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="5"></el-col>
      </el-row>

      <!-- 提交和返回按钮 -->
      <el-button style="margin-top:30px;margin-left:312px" type="primary" @click="actionDiscount">提交</el-button>
      <el-button @click="toDiscount">返回</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addDiscountForm: {
        name: "",
        date: [],
        superposition: "",
        promotionErase: "",
        restrictions: "",
        restrictionsInp: "",
        markingPrice: "",
        price: "",
        store: "",
      },
      id: "",
    };
  },
  methods: {
    sizeChange() {
      return;
    },
    pageChange() {
      return;
    },
    //点击跳转添加页面
    toDiscount() {
      this.$router.push("/home/discount");
    },
    //添加限时折扣
    async addDiscount() {
      const { data: res } = await this.$axios.post("/vip/Discount/add", {
        name: this.addDiscountForm.name + "",
        price: this.addDiscountForm.price + "",
        superposition: this.addDiscountForm.superposition + "",
        promotionErase: this.addDiscountForm.promotionErase ? "抹零" : "不抹零",
        restriction:
          this.addDiscountForm.restrictions == "不限购"
            ? "不限购"
            : this.addDiscountForm.restrictionsInp + "",
        markingPrice: this.addDiscountForm.markingPrice
          ? "显示划线价"
          : "不显示划线价",
        store: this.addDiscountForm.store,
        validity: this.addDiscountForm.date[1],
        status: "1",
      });
      if (res.code != 0) return this.$message.error("限时折扣添加失败!");
      this.$message.success("限时折扣添加成功!");
      this.toDiscount();
    },
    //添加or修改
    actionDiscount() {
      if (this.$store.state.marketing.action == "编辑")
        return this.editDiscount();
      this.addDiscount();
    },
    //修改限时折扣
    async editDiscount() {
      const { data: res } = await this.$axios.post("/vip/Discount/updateDis", {
        name: this.addDiscountForm.name + "",
        price: this.addDiscountForm.price + "",
        superposition: this.addDiscountForm.superposition + "",
        promotionErase: this.addDiscountForm.promotionErase ? "抹零" : "不抹零",
        restriction:
          this.addDiscountForm.restrictions == "不限购"
            ? "不限购"
            : this.addDiscountForm.restrictionsInp + "",
        markingPrice: this.addDiscountForm.markingPrice
          ? "显示划线价"
          : "不显示划线价",
        store: this.addDiscountForm.store,
        validity: this.addDiscountForm.date[1],
        status: "1",
        id: this.id,
      });
      if (res.code != 0) return this.$message.error("限时折扣修改失败!");
      this.$message.success("限时折扣修改成功!");
      this.toDiscount();
    },
  },
  mounted() {
    if (!this.$store.state.marketing.action) return this.toDiscount();
    //渲染修改信息
    if (this.$store.state.marketing.action == "编辑") {
      const info = this.$store.state.marketing.editInfo;
      console.log(info);
      this.addDiscountForm.name = info.name;
      this.addDiscountForm.date = ["2021-08-01", info.validity];
      this.addDiscountForm.superposition = info.superposition;
      this.addDiscountForm.promotionErase =
        info.promotionErase == "抹零" ? true : false;
      this.addDiscountForm.price = info.price;
      this.addDiscountForm.restrictions =
        info.restriction == "不限购" ? "不限购" : "限购";
      this.addDiscountForm.restrictionInp = info.restrictionInp;
      this.addDiscountForm.markingPrice =
        info.markingPrice == "显示划线价" ? true : false;
      this.addDiscountForm.store = info.store;
      this.id = info.id;
    }
  },
};
</script>

<style lang="less" scoped>
.numInp {
  width: 130px;
  margin: 0 15px;
}
.span1 {
  line-height: 39px;
}
.app > .el-card:nth-child(2),
.app > .el-card:nth-child(3) {
  margin-top: 15px;
}
</style>